<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="assets/css/layui.css">
    <link rel="stylesheet" href="assets/css/login.css">
    <link rel="icon" href="/favicon.ico">
    <title>企业业财税一体化平台</title>
</head>
<body class="login-wrap">
    <div class="login-container" id="login_vue">
        <form class="login-form">
            <div class="label-title">
                <h2 align="center" class="label-title">业财税一体化平台</h2>
            </div>
            <div class="input-group">
                <input type="text" id="username" class="input-field">
                <label for="username" class="input-label">
                    <span class="label-title">用户名</span>
                </label>
            </div>
            <div class="input-group">
                <input type="password" id="password" class="input-field">
                <label for="password" class="input-label">
                    <span class="label-title">密码</span>
                </label>
            </div>
            <button type="button" class="login-button" v-on:click="login('admin')">管理员登录<i class="ai ai-enter"></i></button>
            <button type="button" class="login-button" v-on:click="login('user')">普通用户登录<i class="ai ai-enter"></i></button>
        </form>
    </div>
</body>
<script src="assets/layui.js"></script>
<script src="index.js" data-main="login"></script>
<script src="js/vue.dev.js"></script>
<script src="js/jquery.3.2.1.min.js"></script>
<script type="text/javascript"></script>
<script>
    //防止页面后退
    $(function() {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.pushState('forward', null, '#');
                window.history.forward(1);
            });
        }
        window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
        window.history.forward(1);
    });

    var v = new Vue({
        el: "#login_vue",
        created: function (){

        },
        methods: {
            login: function (flag) {
                var self = this;
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                if (username === '' || password === ''){
                    alert('用户名或密码不能为空');
                    return;
                }
                var url = NaN;
                var role = NaN;
                if (flag === 'admin'){
                    role = "admin";
                }else if (flag === 'user'){
                    role = "user";
                }
                url = "http://localhost:8085/system/login/user/login";
                $.ajax({
                    url: url,
                    type: "POST",
                    dataType: "json",
                    data: {
                        "username": username,
                        "password": password,
                        "role": role
                    },
                    success : function (data) {
                        var userId = data.result;
                        if (userId === -1){
                            alert('用户名、密码、角色存在错误');
                            return;
                        }
                        localStorage.setItem("role",role);
                        localStorage.setItem("userId",userId);
                    },
                    error : function () {
                        alert("404");
                    }
                });
            }
        },
    });
</script>
</html>